<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import { useState } from "../../../hooks/index.js";
import { ElMessage } from "element-plus";
import { roleListApi } from '@/api/auth';
import { addUserApi, editUserApi, editUserListApi } from '@/api/user';
import ImageUpload from '@/components/ImageUpload/uploadImg.vue';
;
// ================
const emit = defineEmits(["updateList"]);
const isShow = ref(false);

const formRef = ref()

// 表单数据
const defaultData = {
  username: '',
  nickname: '',
  password: '',
  email: '',
  phone: '',
  roles: [],
  avatar: '',
  status: 1

};
const roleSelect = ref([])
const formData = ref({ ...defaultData });
// =================
// 验证规则
const formRules = {
  username: [{ required: true, message: "请选择", trigger: "blur" }],
  nickname: [{ required: true, message: "请选择", trigger: "blur" }],
  password: [{ required: true, message: "请选择", trigger: "blur" }],
  email: [{ required: true, message: "请选择", trigger: "blur" }],
  phone: [{ required: true, message: "请选择", trigger: "blur" }],
  avatar: [{ required: true, message: "请选择", trigger: "blur" }],
  roles: [{ required: true, message: "请选择", trigger: "change" }],
  status: [{ required: true, message: "请选择", trigger: "change" }],
};

// ============
// 表单提交
const onSubmit = async () => {
  // 表单校验
  await formRef.value.validate();

  // 发送请求
  formData.value.id ?
    await editUserListApi(formData.value) :
    await addUserApi(formData.value)
  // 提示
  ElMessage.success(formData.value.id ? '修改成功' : '添加成功')
  // 更新列表
  emit("updateList");
  // 关闭弹框
  isShow.value = false
}
// 弹窗关闭的回调
const closeHandler = () => {
  // 移除校验
  formRef.value.resetFields();
  // 重置数据
  formData.value = { ...defaultData }
  roleSelect.value = []
}
// 回显事件
const replyData = async (id) => {
  formData.value.id = id
  let res = await editUserApi(id)
  // 处理数据
  formData.value = { ...res.data }
  const arr = res.data.roles.split(',')

  formData.value.roles = arr.map(item => item * 1)
}
// 获取角色列表
const rolesList = async () => {

  let res = await roleListApi()
  roleSelect.value = res.data
}
onMounted(() => {
  rolesList()
})
defineExpose({
  isShow,
  replyData
})


</script>
<template>
  <div>
    <el-drawer v-model="isShow" size="50%" title="添加管理员" @close="closeHandler">
      <el-form ref="formRef" label-width="80px" label-position="top" :model="formData" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="height: 40px"></div>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div />
            <el-form-item label="启用状态" prop="status">
              <el-radio-group v-model="formData.status" class="ml-4">
                <el-radio v-for="item in useState()" :key="item.value" size="large" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="角色" prop="roles">
              <el-select v-model="formData.roles" multiple filterable allow-create default-first-option
                :reserve-keyword="false" placeholder="请选择">
                <el-option v-for="item in roleSelect" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="头像" prop="avatar">
              <ImageUpload v-model:imgUrl="formData.avatar" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped></style>
